<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleReturn">返回</a-button>
        <a-button v-auth="'ROLE_INSTRUCTOR'" type="primary" @click="handleEditScore">评分</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :stopButtonPropagation="true"
            :actions="[
              {
                label: '详情',
                icon: 'clarity:info-standard-line',
                onClick: handleDesc.bind(null, record),
              },
              {
                label: '评价',
                icon: 'clarity:note-edit-line',
                onClick: handleEditRemark.bind(null, record),
                auth: ['ROLE_CAPTAIN'],
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <ScoreEdit @register="registerScoreModal" />
    <LectureNoteDesc @register="registerDescModal" />
    <RemarkModal @register="registerRemarkModal" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, TableAction, useTable } from "/@/components/Table";
  import LectureNoteDesc from "./LectureNoteDesc.vue";
  import ScoreEdit from "./ScoreEdit.vue";
  import { useModal } from "/@/components/Modal";
  import { useRoute, useRouter } from "vue-router";
  import { useTabs } from "/@/hooks/web/useTabs";
  import { lectureNoteBasicColumns } from "/@/views/default/practical/practical.data";
  import { defaultActionColumn, defaultTableSettings } from "/@/hooks/core/useDefault";
  import RemarkModal from "/@/views/default/practical/RemarkEdit.vue";
  import { getLectureNoteScoreApi } from "/@/api/core/internInfo";
  import { getLectureNotePageByIdApi } from "/@/api/core/lectureNote";
  import { PracTypeEnum } from "/@/enums/typeEnum";

  const route = useRoute();
  const { userId, userName } = route.query;

  const [registerTable, { setLoading }] = useTable({
    rowKey: "noteId",
    title: `${userName}的实习听课记录`,
    api: getLectureNotePageByIdApi,
    beforeFetch(params) {
      return { ...params, userId };
    },
    columns: lectureNoteBasicColumns,
    actionColumn: {
      width: 240,
      ...defaultActionColumn,
    },
    ...defaultTableSettings,
  });

  const router = useRouter();
  const { closeCurrent } = useTabs();

  function handleReturn() {
    closeCurrent();
    router.back();
  }

  const [registerDescModal, { openModal: openDescModal }] = useModal();
  const [registerScoreModal, { openModal: openScoreModal }] = useModal();
  const [registerRemarkModal, { openModal: openRemarkModal }] = useModal();

  function handleDesc(record) {
    openDescModal(true, { ...record, userId });
  }

  async function handleEditScore() {
    setLoading(true);
    const data = await getLectureNoteScoreApi(userId as unknown as number);
    openScoreModal(true, { data, target: PracTypeEnum.LectureNote, params: { userId } });
    setLoading(false);
  }

  function handleEditRemark(data) {
    openRemarkModal(true, {
      userId,
      noteId: data.noteId,
      groupEvaluation: data.groupEvaluation,
      target: PracTypeEnum.LectureNote,
    });
  }
</script>
